<template>
	<view @click="goDL" class="wid90 mar mar-top20 bacFFF borRad20" style="box-shadow: 0rpx 6rpx 10rpx 0rpx rgba(199,199,199,0.16);">
		<view class="wid90 mar">
			<view class="dis disAl disJuB" style="height: 74rpx;border-bottom: 1px dashed #E3D4D4;">
				<view class="dis disAl">
					<image src="../../../static/sahngjia.png" style="width: 32rpx;height: 30rpx;"></image>
					<view class="dis disAl mar-left10 fowe800">
						<text class='t-o-e f32'>{{co.storeName}}</text>
						<text class="iconfont iconright ml5 c9 f30 mt8" style="color: #000;"></text>
					</view>
				</view>
				<view class="f-g-0 fowe600" :style="{color:stateColor()}">{{`${getState()}${stime}`}}</view>
			</view>
			<block v-if="otype==1">
				<view class="mar-top20 dis disAl">
					<view class="bs10" style="height: 132rpx;width: 23%;">
						<!-- <mg-img :src='v.icon'></mg-img> -->
						<image :src="co.goodsArr[0].icon" class="hei100" style="width: 132rpx;"></image>
					</view>
					<view style="width: 77%;">
						<view class="dis disAl disJuB" style="line-height: 28rpx;">
							<view class="foSi28 overflowHidden fowe800 wid70">{{co.goodsArr[0].name}}</view>
							<view class="f24" style="color: #737373;">x{{co.goodsArr[0].num}}</view>
						</view>
						<view class="mar-top10 f28 dis disAl" style="color: #737373;line-height: 28rpx;">
							<view class="">堂食</view>
							<view class="b-r"></view>
							<view>{{co.people}}位</view>
						</view>
						<view class="mar-top10 f24" style="color: #737373;line-height: 24rpx;">{{timeToDate(co.createdAt)}}</view>
					</view>
				</view>
				<view class="dis disAl disJuB f24 mar-top20">
					<view class="fowe600" :style="{color:tColor}" style="color: #E20A21;">桌号：{{co.typeName+co.number}}</view>
					<view class="">共{{co.goodsNum}}件商品合计：<text class="fowe600">{{`${(co.symbol||sl)+co.money}`}}</text></view>
				</view>
				<view class="p23">
					<view class="f-row">
						<view class="f-g-1 f-x-e">
							<view v-if="co.state==1&&co.eatType==1||co.state==2&&co.eatType==2" @click.stop="$emit('operation',{t:'tsljzf',co})"
							 class="obtn cf" :style="{color: tColor,borderColor:tColor}">立即支付</view>
							<view v-if="co.state==3" @click.stop="$emit('operation',{t:'lxsj',co})" class="obtn b-d">联系商家</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else-if="otype==2">
				<view class="mar-top20 dis disAl">
					<view class="bs10" style="height: 132rpx;width: 23%;">
						<!-- <mg-img :src='v.icon'></mg-img> -->
						<image :src="co.goodsArr[0].icon" class="hei100" style="width: 132rpx;"></image>
					</view>
					<view style="width: 77%;">
						<view class="dis disAl disJuB" style="line-height: 28rpx;">
							<view class="foSi28 overflowHidden fowe800 wid70">{{co.goodsArr[0].name}}</view>
							<view class="f24" style="color: #737373;">x{{co.goodsArr[0].num}}</view>
						</view>
						<view class="mar-top10 f24" style="color: #737373;line-height: 24rpx;">{{timeToDate(co.createdAt)}}</view>
					</view>
				</view>
				<view class="dis disAl disJuB f24 mar-top20">
					<view class="fowe600"></view>
					<view class="">实付：<text class="fowe600">{{`${(co.symbol||sl)+co.money}`}}</text></view>
				</view>
				<view class="p23">
					<view class="f-row">
						<view class="f-g-1 f-x-e">
							<view class="obtn b-d">查看详情</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else-if="otype==4">
				<view class="mar-top20 dis disAl">
					<view class="bs10" style="height: 132rpx;width: 23%;">
						<!-- <mg-img :src='v.icon'></mg-img> -->
						<image :src="co.goodsArr[0].icon" class="hei100" style="width: 132rpx;"></image>
					</view>
					<view style="width: 77%;">
						<view class="dis disAl disJuB" style="line-height: 28rpx;">
							<view class="foSi28 overflowHidden fowe800 wid70">{{co.goodsArr[0].name}}</view>
							<view class="f24" style="color: #737373;">x{{co.goodsArr[0].num}}</view>
						</view>
						<view class="mar-top10 f28 dis disAl" style="color: #737373;line-height: 28rpx;">{{co.isOut==1? thisCustom.dnjc || '店内就餐':thisCustom.dbdz || '打包带走'}}</view>
						<view class="mar-top10 f24" style="color: #737373;line-height: 24rpx;">{{timeToDate(co.createdAt)}}</view>
					</view>
				</view>
				<view class="dis disAl disJuB f24 mar-top20">
					<view class="fowe600" :style="{color:tColor}" style="color: #E20A21;">{{co.callNo?`取单号：${co.callNo}`:''}}</view>
					<view class="">共{{co.goodsNum}}件<text class="fowe600">{{`${(co.symbol||sl)+co.money}`}}</text></view>
				</view>
				<view class="p23">
					<view class="f-row">
						<view class="f-g-1 f-x-e">
							<view v-if="co.state==1" @click.stop="$emit('operation',{t:'qxdd',co,tip:1})" class="obtn b-d">取消订单</view>
							<view v-if="co.state==1" @click.stop="$emit('operation',{t:'ljzf',co})" class="obtn cf" :style="{color: tColor,borderColor:tColor}">立即支付</view>
							<view v-if="co.isTk==1" @click.stop="$emit('operation',{t:'sqtk',co})" class="obtn cf" :style="{color: tColor,borderColor:tColor}">取消订单</view>
							<view v-if="co.state==3" @click.stop="$emit('operation',{t:'lxsj',co})" class="obtn b-d">联系商家</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else-if="otype==3">
				<view class="mar-top20 dis disAl">
					<view class="bs10" style="height: 132rpx;width: 23%;">
						<!-- <mg-img :src='v.icon'></mg-img> -->
						<image :src="co.goodsArr[0].icon" class="hei100" style="width: 132rpx;"></image>
					</view>
					<view style="width: 77%;">
						<view class="dis disAl disJuB" style="line-height: 28rpx;">
							<view class="foSi28 overflowHidden fowe800 wid70">{{co.goodsArr[0].name}}</view>
							<view class="f24" style="color: #737373;">x{{co.goodsArr[0].num}}</view>
						</view>
						<view class="mar-top10 f28 dis disAl" style="color: #737373;line-height: 28rpx;">
							<view class="">{{co.regionName}}</view>
							<view class="b-r"></view>
							<view>{{co.people}}人就餐</view>
						</view>
						<view class="mar-top10 f24" style="color: #737373;line-height: 24rpx;">{{timeToDate(co.createdAt)}}</view>
					</view>
				</view>
				<view class="p23">
					<view class="f-row">
						<view class="f-g-1 f-x-e">
							<view class="obtn b-d">查看详情</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else-if="otype==5">
				<view class="mar-top20 dis disAl">
					<view class="bs10" style="height: 132rpx;width: 23%;">
						<!-- <mg-img :src='v.icon'></mg-img> -->
						<image :src="co.goodsArr[0].icon" class="hei100" style="width: 132rpx;"></image>
					</view>
					<view style="width: 77%;">
						<view class="dis disAl disJuB" style="line-height: 28rpx;">
							<view class="foSi28 overflowHidden fowe800 wid70">{{co.goodsArr[0].name}}</view>
							<view class="f24" style="color: #737373;">x{{co.goodsArr[0].num}}</view>
						</view>
						<view class="mar-top10 f28 dis disAl" style="color: #737373;line-height: 28rpx;">
							<view class="">{{co.name}}</view>
							<view class="b-r"></view>
							<view>{{co.people}}人就餐</view>
						</view>
						<view class="mar-top10 f24" style="color: #737373;line-height: 24rpx;">{{timeToDate(co.createdAt)}}</view>
					</view>
				</view>
				<view class="dis disAl disJuB f24 mar-top20">
					<view class="fowe600" :style="{color:tColor}">排队号：{{co.code}}</view>
				</view>
				<view class="p23">
					<view class="f-row">
						<view class="f-g-1 f-x-e">
							<view class="obtn b-d" @click.stop="$emit('operation',{t:'scpd',co})">删除</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import {
		utilMixins
	} from "@/common/util-mixins.js"
	import utils from '@/common/utils.js'
	import bkB from '@/components/common/block-b.vue'
	export default {
		name: 'my-dnorder',
		components: {
			bkB
		},
		props: {
			co: {
				type: Object,
				default: function() {
					return {}
				}
			},
			otype: {
				type: Number, //1堂食2收银
				default: 1,
			},
		},
		data() {
			return {
				stateArr: ['', '待付款', '就餐中', '已支付', '已关闭', '已退款'],
				kcstateArr: ['待付款', '待接单', '制作中', '已完成', '已关闭', '申请退款', '退款通过', '退款拒绝', '商家拒单'],
				yystateArr: ['待支付', '预约中', '预约成功', '已拒绝', '确认到店', '已取消'],
				pdstateArr: ['排队中', '已就餐', '已过号', '已取消'],
				stime: '',
			}
		},
		mixins: [utilMixins],
		computed: {
			// tColor() {
			// 	return '#FF5B0A'
			// },
			thisCustom(){
			return this.system.custom
			}
		},
		methods: {
			goDL() {
				let url
				switch (this.otype) {
					case 1:
						url = '/yb_wm/shop/in/order-dl?id=' + this.co.id
						break;
					case 2:
						url = '/yb_wm/shop/in/syorder-dl?id=' + this.co.id
						break;
					case 4:
						url = '/yb_wm/shop/ffmode/order-dl?id=' + this.co.id
						break;
					case 3:
						url = '/yb_wm/shop/reserve/yyxq?id=' + this.co.id
						break;
					case 5:
						url = '/yb_wm/shop/lineup/pdxq?id=' + this.co.id
						break;
				}
				this.go({
					t: 1,
					url,
				})
			},
			gosjDL() {
				// this.$store.state.config.storeInfo.id = this.co.storeId
				this.go({
					t: 6,
					// url: `/yb_wm/index/goods?storeId=${this.co.storeId}`
					url: '/yb_wm/index/goods'
				})
			},
			getState() {
				if (this.otype == 1) {
					return this.stateArr[+this.co.state]
				} else if (this.otype == 2) {
					return '已完成'
				} else if (this.otype == 4) {
					return this.kcstateArr[+this.co.state - 1] || ''
				} else if (this.otype == 3) {
					return this.yystateArr[+this.co.state - 1]
				} else if (this.otype == 5) {
					return this.pdstateArr[+this.co.state - 1]
				}
			},
			stateColor() {
				let color = ''
				if (this.otype == 1 || this.otype == 2) {
					switch (+this.co.state) {
						case 1:
						case 2:
							color = this.otype == 1 ? this.tColor : '#999';
							break;
						case 7:
							color = '';
							break;
						case 8:
						case 5:
							color = '#f00';
							break;
						default:
							color = '#999';
					}
				} else if (this.otype == 3) {
					switch (+this.co.state) {
						case 2:
						case 3:
							color = this.tColor;
							break;
						case 4:
							color = '#f00';
							break;
						default:
							color = '#999';
					}
				} else if (this.otype == 4) {
					switch (+this.co.state) {
						case 1:
						case 3:
							color = this.tColor;
							break;
						default:
							color = '#999';
					}
				} else if (this.otype == 5) {
					switch (+this.co.state) {
						case 1:
							color = this.tColor;
							break;
						default:
							color = '#999';
					}
				}
				return color
			},
			djs(time) {
				//，剩余 13:55
				if (this.co.state != 1) return
				let now = this.dateToTime(),
					time2 = +time + 900
				if (time2 > now) {
					let a = utils.countDownTime(time2 - now)
					this.stime = `，
							剩余 $ {
								a[2]
							}: $ {
								a[3]
							}
							`
					this.dsq = setInterval(async () => {
						time2 -= 1
						if (time2 == now) {
							clearInterval(this.dsq)
							this.$emit('operation', {
								t: 'qxdd',
								co: this.co
							})
							//这里不单独放方法里执行会导致定时器await的bug，执行2此这里
						}
						let arr = utils.countDownTime(time2 - now)
						this.stime = `，
							剩余 $ {
								arr[2]
							}: $ {
								arr[3]
							}
							`
						//console.log('倒计时', time2 - now)
					}, 1000)
				}
				//console.log(time, time2, now)
			},
		},
		// async created() {
		// 	this.djs(this.co.createdAt)
		// },
		// destroyed() {
		// 	clearInterval(this.dsq)
		// },
	}
</script>

<style scoped lang="scss">
	.mrltc {
		width: 50rpx;
		height: 50rpx;
	}

	.b-l-ts {
		background: linear-gradient(to bottom, #f38529, #fe912c);
	}

	.b-l-sy {
		background: linear-gradient(to bottom, #a57afa, #a175f8);
	}

	.b-l-kc {
		background: linear-gradient(to bottom, #07C160, #09BB07);
	}

	.b-l-yy {
		background: linear-gradient(to bottom, #05CBE0, #02AABA);
	}

	.b-l-pd {
		background: linear-gradient(to bottom, #FFCD42, #FABC0A);
	}

	.b-r {
		width: 1px;
		height: 23rpx;
		background: #999;
		margin: 0 12rpx;
	}
</style>
